/**
 * =============================================================================
 * ************   Tooltip 工具提示   ************
 * =============================================================================
 */

.mdui-tooltip {
  position: relative;
  display: inline-block;
  overflow: visible;

  &::before {
    position: absolute;
    display: inline-block;
    box-sizing: border-box;
    width: max-content;
    max-width: 180px;
    min-height: 32px;
    padding: 4px;
    color: #fff;
    font-weight: 500;

    // 移动端样式
    font-size: 14px;
    line-height: 22px;
    text-align: left;
    background-color: rgba(red(@color-grey-700), green(@color-grey-700), blue(@color-grey-700), 0.9);
    border-radius: 2px;
    transform: scale(0);
    opacity: 0;
    transition-delay: 0.1s;
    transition-timing-function: @animation-curve-default;
    transition-duration: 0.35s;
    transition-property: opacity;
    content: attr(data-tip);
    will-change: opacity, transform;

    // 桌面端样式
    @media (min-width: @screen-md-min) {
      max-width: 200px;
      min-height: 24px;
      padding: 8px;
      font-size: 12px;
      line-height: 18px;
    }
  }

  /* 显示工具提示 */
  &:hover::before {
    opacity: 1;
  }

  &.mdui-tooltip-top:hover::before {
    top: auto;
    bottom: 100%;
    left: 50%;
    transform: scale(1) translate(-50%);
  }

  &.mdui-tooltip-bottom:hover::before {
    top: 100%;
    bottom: auto;
    left: 50%;
    transform: scale(1) translate(-50%);
  }

  &.mdui-tooltip-left:hover::before {
    top: 50%;
    right: 100%;
    left: auto;
    transform: scale(1) translate(0, -50%);
  }

  &.mdui-tooltip-right:hover::before {
    top: 50%;
    right: auto;
    left: 100%;
    transform: scale(1) translate(0, -50%);
  }

}
